import { createApp } from 'vue'
import App from './App.vue'
import 'amfe-flexible';
import router from './router/index.js'
import 'default-passive-events'
import SocketIO from './plugins/io' // 导入插件
const app = createApp(App)
// 表单验证自定义指令
app.directive('jiaoyan', {
  mounted(el, vnode) {
    // el 原型
    // vnode 虚拟dom
    // console.log(el, vnode);
    // 将验证拆分为验证数组
    let ValueArr = vnode.value.split('|')
    // 失去焦点的时候
    el.addEventListener('blur', function () {
      // 失去焦点的时候验证
      checked()
    })
    // 循环进行验证
    function checked() {
      for (let i = 0; i < ValueArr.length; i++) {
        // console.log(ValueArr[i]);
        let isrequired = /^required$/ //是否为空判断
        let isphone = /^phone$/ //手机号校验
        let isemail = /^email$/ //邮箱校验
        let isminlength = /minlength\(/ //最小长度
        let ismaxlength = /maxlength\(/ //最大长度
        // let isrule = /rule\(/ //输入格式
        // let isyamlength = /yzmlength\(/ //验证码长度
        // 判断设置了非空
        if (isrequired.test(ValueArr[i])) {
          if (!required()) {
            break;
          } else {
            removeTips();
          }
        }
        // 判断设置了手机号
        if (isphone.test(ValueArr[i])) {
          if (!phone()) {
            break;
          } else {
            removeTips();
          }
        }
        // 判断设置了邮箱
        if (isemail.test(ValueArr[i])) {
          if (!email()) {
            break;
          } else {
            removeTips();
          }
        }
        // 最小长度
        if (isminlength.test(ValueArr[i])) {
          if (!eval(ValueArr[i])) {
            break;
          } else {
            removeTips();
          }
        }
        // // 验证码长度
        // if (isyamlength.test(ValueArr[i])) {
        //   if (!eval(ValueArr[i])) {
        //     break;
        //   } else {
        //     removeTips();
        //   }
        // }
        // 最大长度
        if (ismaxlength.test(ValueArr[i])) {
          if (!eval(ValueArr[i])) {
            break;
          } else {
            removeTips();
          }
        }
        // // 正则表达式
        // if (isrule.test(ValueArr[i])) {
        //   if (!eval(ValueArr[i])) {
        //     break;
        //   } else {
        //     removeTips();
        //   }
        // }
      }
    }
    // 验证是否是必填项
    function required() {
      if (el.value == '' || el.value == null) {
        el.nextElementSibling.innerHTML = '不能为空！'
        el.nextElementSibling.style.color = 'red'
        return false;
      }
      return true;
    }
    // 验证是否是手机号码
    function phone() {
      let phoneRule = /^[1][3,4,5,7,8][0-9]{9}$/;
      if (!phoneRule.test(el.value)) {
        el.nextElementSibling.innerHTML = '请输入正确的手机号码！'
        el.nextElementSibling.style.color = 'red'
        return false;
      }
      return true;
    }
    // 验证是否是正确邮箱
    function email() {
      let email = /^(([^<>()[\]\\.,;:\s@"]+(\.[^<>()[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/
      if (!email.test(el.value)) {
        el.nextElementSibling.innerHTML = '请输入正确的邮箱！'
        el.nextElementSibling.style.color = 'red'
        return false;
      }
      return true;
    }
    // 正确时，移除提示信息
    function removeTips() {
      el.nextElementSibling.innerHTML = ''
    }
    // 最小长度验证
    function minlength(length) {
      if (el.value.length < length) {
        el.nextElementSibling.innerHTML = "最小长度不能小于" + length + '！'
        el.nextElementSibling.style.color = 'red'
        return false;
      }
      return true;
    }
    minlength()
    maxlength()
    // console.log(minlength);
    // console.log(maxlength);
    // 最大长度进行验证
    function maxlength(length) {
      if (el.value.length > length) {
        el.nextElementSibling.innerHTML = "最大长度不能大于" + length + '！'
        el.nextElementSibling.style.color = 'red'
        return false;
      }
      return true;
    }
    // // 验证码长度验证
    // function yzmlength(length) {
    //   if (el.value.length != length) {
    //     el.nextElementSibling.innerHTML = "验证码长度需为" + length + '个！'
    //     el.nextElementSibling.style.color = 'red'
    //     return false;
    //   }
    //   return true;
    // }
    // // 进行正则表达式的验证
    // function rule(rules) {
    //   if (!rules.test(el.value)) {
    //     el.nextElementSibling.innerHTML = '请输入正确的格式！'
    //     el.nextElementSibling.style.color = 'red'
    //     return false;
    //   }
    //   return true;
    // }
  }
})
app.use(SocketIO, { // 应用
  connection: 'http://43.138.15.137:3000', // socket服务地址
})
app.use(router).mount('#app')
